<template>
  <div class="logpage">
    <div class="removebtn">
      <a-button type="danger" >
        清空日志
      </a-button>
    </div>
    <a-skeleton :loading="loading">
      <a-table :pagination="pagination" :columns="columns" :data-source="data"  rowKey="id" @change="handleTableChange">
        <span slot="tags" slot-scope="tags">
          <a-tag
            color="green"
          >
            {{ tags }}
          </a-tag>
        </span>
        <span slot="ip_time" slot-scope="ip_time">
          {{moment(ip_time).format('YYYY/MM/DD')}}
        </span>
      </a-table>
    </a-skeleton>
</div>
</template>
<script>
import { getallip } from '@/api/webapi.js'
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '用户名',
    dataIndex: 'ip_user',
    key: 'ip_user',
    scopedSlots: { customRender: 'tags' }
  },
  {
    title: 'IP',
    dataIndex: 'ip_path',
    key: 'ip_path'
  },
  {
    title: '国家',
    dataIndex: 'ip_country',
    key: 'ip_country'
  },
  {
    title: '省份',
    dataIndex: 'ip_address',
    key: 'ip_address'
  },
  {
    title: '城市',
    dataIndex: 'ip_city',
    key: 'ip_city'
  },
  {
    title: '访问时间',
    key: 'ip_time',
    dataIndex: 'ip_time',
    scopedSlots: { customRender: 'ip_time' },
    defaultSortOrder: 'descend',
    sorter: (a, b) => { return a.ip_time > b.ip_time ? 1 : -1 }
  }
]
export default {
  data () {
    return {
      data: [],
      columns,
      loading: true,
      queryParams: {
        page: 1,
        pageSize: 10
      },
      pagination: {
        total: 0,
        pageSize: 10, // 每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      }
    }
  },
  methods: {
    handleTableChange (current) {
      this.queryParams.page = current.current
      this.queryParams.pageSize = current.pageSize
      this.pagination.pageSize = current.pageSize
      this.getUserIp()
    },
    getUserIp () {
      getallip(this.queryParams).then((res) => {
        if (res.code === 200) {
          // this.$message.success('获取成功')
          this.data = res.data.results
          this.pagination.total = res.data.count
          this.pagination.pageSize = this.queryParams.pageSize
          this.loading = false
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  mounted () {
    this.getUserIp()
  }
}
</script>
<style lang="less" scoped>
.logpage{
  background: #fff;
  height: auto;
}
.removebtn{
  margin-bottom: 10px;
  height: 50px;
}
</style>
